<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./line/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            display: flex;
        }

        ul {
            list-style: none;
            text-align: left;
            width: 200px;
            background-color: rgb(38, 36, 36);
            color: white;
        }

        ul li {
            box-sizing: border-box;
            padding-left: 40px;
            width: 200px;
            height: 40px;
            border: 1px solid aqua;
            background-color: black;
            line-height: 40px;
        }

        ul li:hover {
            background-color: blue;
            cursor: pointer;
        }

        ul li:nth-child(5) {
            background-color: blue;
        }

        ul li:nth-child(8) {
            background-color: gray;
        }

        ul li:nth-child(1) {
            line-height: 60px;
            width: 200px;
            height: 60px;
        }

        ul li:nth-child(2) {
            height: 60px;
            line-height: 60px;
        }

        .content span {
            margin-left: 15px;
            margin-right: 40px;
        }

        .content .tubiao {
            flex: 1;
            border: 1px solid grey;
            padding: 20px;
        }

        .content .tubiao input {
            width: 200px;
            height: 20px;
            border-radius: 10px;
            padding-left: 20px;
        }

        .content .tubiao h3 {
            position: fixed;
            top: 20px;
            right: 50px;
        }

        .content .tubiao .shu {
            display: flex;
            justify-content: space-between;
            height: 50px;
            background-color: rgb(246, 239, 239);
            margin-top: 15px;
            line-height: 50px;
        }

        .content .tubiao .data {
            display: flex;
            justify-content: space-between;
        }

        .content .tubiao .data .line {
            margin-top: 40px;
            width: 600px;
            height: 300px;
            border: 1px solid black;
        }

        .content .tubiao .data .baner {
            width: 600px;
            height: 300px;
            margin-top: 40px;
            border: 1px solid black;
        }

        .content .tubiao .buttom {
            margin-top: 10px;
            width: 600px;
            height: 300px;
            background-color: rgb(230, 225, 225);
        }

        .content .tubiao .buttom1 {
            margin-top: 10px;
            width: 600px;
            height: 300px;
            background-color: rgb(230, 225, 225);
        }

        .content .tubiao .box {
            display: flex;
            justify-content: space-between;
        }

        .content .tubiao .buttom span {
            line-height: 80px;
            margin-right: 50px;
        }

        .content .tubiao .buttom span {
            line-height: 80px;
            margin-right: 50px;
        }

        .content .tubiao .box1 {
            display: flex;
            justify-content: space-between;
        }

        .box .buttom table {
            width: 100%;
            text-align: center;
            line-height: 40px;
        }
        .box .buttom1 ol{
            box-sizing: border-box;
            width: 600px;
            height: 300px;
            list-style: none;
            display: flex; 
            padding: 20px;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <!-- 内容区 -->
    <div class="content">
        <ul>
            <li class="iconfont icon-shanchu"><span>CHINA</span>﹀</li>
            <li class="iconfont icon-yonghu"><span>HOME</span>﹀</li>
            <li class="iconfont icon-xitongrizhi"><span>china</span></li>
            <li class="iconfont icon-yonghu"><span>China</span></li>
            <li class="iconfont icon-yonghu"><span>America</span>﹀</li>
            <li class="iconfont icon-yonghu"><span>Japan</span></li>
            <li class="iconfont icon-shanchu"><span>Russia</span>﹀</li>
            <li class="iconfont icon-shezhi"><span>Egypt</span></li>
            <li class="iconfont icon-bianji"><span>Greece</span>﹀</li>
            <li class="iconfont icon-yonghu"><span>France</span></li>
            <li class="iconfont icon-tree"><span>Germany</span><</li>
            <li class="iconfont icon-ums-admin"><span>France</span></li>
            <li class="iconfont icon-yonghu"><span>Germany</span><</li>
            <li class="iconfont icon-yonghu"><span>Germany</span><</li>
            <li class="iconfont icon-liebiao"><span>Egypt</span></li>
            <li class="iconfont icon-pie"><span>Greece</span></li>
            <li class="iconfont icon-pie"><span>Greece</span></li>
            <li class="iconfont icon-pie"><span>Greece</span></li>
        </ul>
        <div class="tubiao">
            <span class="iconfont icon-xitongrizhi"></span>
            <span>HOME</span>
            <span>CONTEXT</span>
            <input type="text" placeholder="very good">
            <h3>HOME/ Document v3</h3>
            <div class="shu">
                <span>Dashboard v3</span>
                <span>HOME</span>
            </div>
            <div class="data">
                <div class="line"></div>
                <div class="baner"></div>
            </div>
            <div class="box">
                <div class="buttom">
                    <table>
                        <thead>
                            <tr>
                                <th>serves</th>
                                <th>name</th>
                                <th>home</th>
                                <th>Year</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="buttom1">
                    <ol>
                        <li>serves</li>
                        <li>name</li>
                        <li>home</li>
                    </ol>
                    <div class="bbb"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./mock.js"></script>
<script src="./biaoge.js"></script>
<script>
    var obj = Mock.mock({
        'list1|7': [
            ' @natural(10, 100)'
        ],
        'list2|7': [
            ' @integer(10, 100)'
        ],
    })
    var con = document.querySelector('.tubiao>.data>.line');
    var e = echarts.init(con);
    //2.绘制图表
    e.setOption({
        title: { //图表的标题
            text: 'visitors Over Time'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'line',
                // data: [10, 12, 17, 16, 18, 17, 16],
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'line',
                // data: [10, 18, 27, 19, 20, 28, 20],
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });

    // =====================================
    var con = document.querySelector('.tubiao>.data>.baner');
    var e2 = echarts.init(con);
    //2.绘制图表
    e2.setOption({
        title: { //图表的标题
            text: 'Sales'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: 'This year',
                type: 'bar',
                // data: [100, 120, 170, 165, 180, 178, 160],
                data: obj.list1,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: 'Last year',
                type: 'bar',
                // data: [60, 80, 70, 65, 80, 78, 100],
                data: obj.list2,
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }

            }

        ]
    });
    // 渲染表格数据
    function render(data) {
        var str = data.map((item, index) => {
            return `
            <tr>
                <td>${item.email}</td>
                <td>${item.name}</td>
                <td>${item.address}</td>
                <td>${item.count}</td>
            </tr> `
        }).join('')
        document.querySelector('.box>.buttom>table>tbody').innerHTML = str
    }
    render(data.list)
    // function render(data) {
    //     var str = data.map((item, index) => {
    //         return `
    //         <tr>
    //             <td>${item.email}</td>
    //             <td>${item.name}</td>
    //             <td>${item.address}</td>
    //             <td>${item.count}</td>
    //         </tr> `
    //     }).join('')
    //     document.querySelector('.box>.buttom1').innerHTML = str
    // }
    // render(data.list)
</script>